<template>
  <div class="page">
    <!-- navbar -->
    <div style="height: 44px;display: flex;align-items: center;justify-content: space-between;padding: 0 12px;">
      <i class="Icon" style="width: 44px;height: 44px;line-height: 44px;font-size: 20px;"
        @click="backHandle()">arrow_back_ios_new</i>
      <div style="display: flex;align-items: center;">
        <i class="Icon" style="color: #000000;font-size: 26px;" @click="qrCodeHandle()">qr_code_2</i>
        <div style="width: 12px;"></div>
        <i class="Icon" style="color: #000000;font-size: 26px;" @click="memberHandle()">ballot</i>
      </div>
    </div>

    <div class="body">
      <div style="background-color: #ffffff;padding: 0 12px;padding-bottom: 12px;">
        <div style="font-size: 26px;font-weight: bold;">XXX餐馆</div>
        <van-skeleton title row="3" :loading="loading">
          <!-- base info -->
          <div style="padding: 12px 0;margin-top: 12px;">
            <div style="font-size: 16px;">堂食</div>
            <div style="margin-top: 6px;display: flex;align-items: center;justify-content: space-between;">
              <div style="font-size: 14px;">下单中</div>
              <div style="font-size: 14px;">20号桌</div>
            </div>
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 6px;">
              <div style="font-size: 14px;">2022-02-02 13-30 pm</div>
              <div style="font-size: 14px;">￥30.00</div>
            </div>
          </div>
        </van-skeleton>

        <!-- line -->
        <div style="height: 2px;background-color: #ebebeb;margin: 12px 0;"></div>
        <van-skeleton title row="5" :loading="loading">

          <!-- goods -->
          <div>
            <div style="display: flex;justify-content: space-between;margin-top: 6px;" v-for="(item,idx) in 2"
              :key="idx">
              <div>
                <div style="display: flex;align-items: center;">
                  <i class="Icon" v-if="idx==0" style="font-size: 20px;color: #4dd35c;">shopping_bag</i>
                  <div style="font-size: 16px;">蒸鱼</div>
                  <div style="font-size: 14px;">(金木鲈鱼,青葱)</div>
                </div>
                <div style="font-size: 12px;color: #666666;">(微辣)</div>
              </div>

              <div style="display: flex;align-items: center;">
                <div style="font-size: 14px;">x1</div>
                <div style="width: 12px;"></div>
                <div style="font-size: 14px;">10.00</div>
              </div>
            </div>
          </div>

          <!-- line -->
          <div style="height: 1px;background-color: #ebebeb;margin-top: 12px;margin-right: 0;"></div>

          <!-- fee detail -->
          <div style="display: flex;flex-direction: column;align-items: flex-end;">
            <!-- fee -->
            <div style="display: flex;align-items: center;margin-top: 12px;">
              <div style="font-size: 14px;">小结</div>
              <div style="width: 110px;"></div>
              <div style="font-size: 16px;">$10.00</div>
            </div>
            <!-- fee -->
            <div style="display: flex;align-items: center;margin-top: 12px;">
              <div style="font-size: 14px;">服务费</div>
              <div style="width: 110px;"></div>
              <div style="font-size: 16px;">$10.00</div>
            </div>
            <!-- fee -->
            <div style="display: flex;align-items: center;margin-top: 12px;">
              <div style="font-size: 14px;">打折</div>
              <div style="width: 110px;"></div>
              <div style="font-size: 16px;">$10.00</div>
            </div>

            <!-- line -->
            <div style="height: 1px;background-color: #ebebeb;margin-top: 12px;width: 60%;"></div>
            <!-- total Fee -->
            <div style="display: flex;align-items: center;margin-top: 12px;">
              <div style="font-size: 16px;">$10.00</div>
            </div>

            <!-- 优惠券 -->
            <div style="display: flex;align-items: center;margin-top: 12px;">
              <div style="border: 1px solid #ebebeb;">
                <van-field type="text" label="" placeholder="优惠吗"
                  style="padding: 0 12px;height: 35px;line-height: 35px;" />
              </div>
              <div style="width: 12px;"></div>
              <van-button type="primary" style="height: 35px;">应用</van-button>
            </div>
            <!-- 结账 -->
            <div style="display: flex;align-items: center;margin-top: 12px;">
              <van-button type="primary" style="height: 35px;background-color: #0066fe;border: none;">结账</van-button>
            </div>

          </div>

        </van-skeleton>
      </div>
    </div>

    <!-- dialog -->
    <!-- qrcode -->
    <van-popup v-model="showqrcode">
      <van-image src="" fit="contain" width="230" height="230" />
    </van-popup>
  </div>
</template>

<script>
  export default {
    mounted() { },
    data() {
      return {
        loading: false,
        showqrcode: false,

        showtime: false,
        showpepolenum: false,
        statusNames: [
          "Wait pay",
          "Preparing",
          "During the meal",
          "Done",
          "Cancel",
        ],
        info: {
          orderId: "202201021800",
          time: "2022-02-03 16:33",
          price: "98.00",
          memberNum: 4,
          status: 1, //0 wait pay  1 prepare  2 eating 3 done 4 cancel
          foods: [
            {
              name: "海鲜自助午餐火锅【组合】",
              img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
              price: "208",
              num: 1,
              takeaway: 0,
              subfoods: [
                {
                  name: "cole",
                  img: "https://ossmuyuanec.oss-cn-beijing.aliyuncs.com/Storage/Shop/1221/Products/17977/1.png",
                  price: "3.00",
                  num: 3,
                },
                {
                  name: "snake",
                  img: "https://img.zcool.cn/community/0126e25e040d5fa8012165189e81fc.jpg@1280w_1l_2o_100sh.jpg",
                  price: "12.00",
                  num: 1,
                },
              ],
            },
            {
              name: "小炒肉",
              img: "https://img.zcool.cn/community/01272858d8b7c8a801219c77827c87.jpg@1280w_1l_2o_100sh.jpg",
              price: "12.00",
              num: 2,
              takeaway: 0,
            },
          ],
        },
      };
    },

    methods: {
      backHandle() {
        this.$router.go(-1);
      },
      payHandle() {
        this.$router.push({
          path: "/paypage",
        });
      },
      addHandle() {
        let order = {
          action: 3,
          time: undefined,
          pepoleNum: 1,
          foods: [],
          remark: "",
          totalFee: 0.0,
        };
        localStorage.setItem("shopcar", JSON.stringify(order));
        this.$router.push({
          path: "/foodcate",
        });
      },

      editNumHandle() {
        this.showpepolenum = true;
      },
      editTimeHandle() {
        this.showtime = true;
      },
      doneNumHandle() {
        this.showpepolenum = false;
      },
      timeConfirmHandle() {
        this.showtime = false;
      },
      qrCodeHandle() {
        this.showqrcode = true;
      },
      memberHandle() {
        this.$router.push({
          path: "/ordermember",
        });
      },
    },
  };
</script>

<style scoped>
  .page {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }

  .body {
    flex: 1;
    overflow-y: auto;
    background-color: #f5f6f7;
    padding-bottom: 12px;
  }
</style>